<template>
  <div>
    <div class="main_heade">
      <h2>系统面经资料馆</h2>
    </div>
    <div class="main_content">
      <div
        style="
          width: 90%;
          margin-left: 10%;
          margin-top: 30px;
          display: flex;
          margin-right: 10%;
        "
      >
        <!-- 搜索框 -->
        <div class="dataSearch">
          <!-- 输入框 -->
          <input
            type="text"
            class="ipt_val"
            placeholder="搜索"
            v-model="formData.search"
          />
          <!-- 放大镜 -->
          <input type="button" class="ipt_fdj" />
          <!-- 搜索按钮 -->
          <!-- <button type="button" class="ipt_searchOne">搜索</button> -->
        </div>
        <button class="ipt_searchOne" @click="seaech">
          <i class="el-icon-search"></i>点击搜索
        </button>
        <button type="button" class="ipt_search" @click="fabu()">
          <i class="el-icon-edit"></i>我要发布
        </button>
        <!-- <span @click="fabu()" style="margin-left: 1.25rem;"></span> -->
      </div>
      <div
        style="margin-top: 1.25rem; margin-left: 20px; margin-right: 1.25rem"
      >
        <el-row>
          <el-col>
            <h3 style="color: #7a7a7a">面经的集合</h3>
          </el-col>
        </el-row>
        <el-row class="meridian">
          <el-col :span="6" v-for="Item in table" :key="Item.id">
            <div
              class="meridian_item"
              @click="ChangeLable(Item.id, Item.postsNum, Item.labelName)"
            >
              <img
                style="
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                  margin-left: 1.25rem;
                "
                :src="Item.labelImage"
              />{{ Item.labelName }}
              <span
                style="
                  margin-left: 0.625rem;
                  color: #d9d9d9;
                  font-size: 0.675rem;
                "
                >({{ Item.postsNum }}篇)</span
              >
            </div>
          </el-col>
        </el-row>
      </div>
      <div
        style="
          margin-top: 1.25rem;
          margin-left: 20px;
          margin-right: 1.25rem;
          margin-bottom: 1.875rem;
        "
      >
        <el-row>
          <el-col>
            <h3 style="color: #7a7a7a">公司面经</h3>
          </el-col>
        </el-row>
        <el-row class="meridian">
          <el-col :span="6" v-for="Item in TableEnterprises" :key="Item.id">
            <div
              class="meridian_item"
              @click="changeEnter(Item.id, Item.postsNum, Item.enterpriseName)"
            >
              <el-image
                style="
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                  margin-left: 1.25rem;
                "
                :src="Item.enterpriseImage"
              ></el-image
              >{{ Item.enterpriseName
              }}<span
                style="
                  margin-left: 0.625rem;
                  color: #d9d9d9;
                  font-size: 0.675rem;
                "
                >({{ Item.postsNum }}篇)</span
              >
            </div>
          </el-col>
        </el-row>
        <div class="fenyePage">
          <el-pagination
            class="fenye"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-size="50"
            :page-count="pagecount"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { HttpManager } from "../../request/Facial.js";
export default {
  data() {
    return {
      // 表单数据
      formData: {
        // 上级文件夹id，默认全部文件最上层为0
        id: 0,
        // 搜索框内容
        search: "",
        // 是否逆序
        reverse: false,
      },
      total: 1000,
      pagecount: 12,
      currentPage: 1,
      table: [],
      TableEnterprises: [],
      url: "https://www.funit.cn/img/interview/ic_summary_img_5.png",
    };
  },
  mounted() {
    this.Init();
    this.InitEnterprises();
  },
  methods: {
    change() {
      this.$router.push("/SpecialMeridian");
    },
    seaech() {
      console.log("搜索");
    },
    fabu() {
      this.$router.push("/ReleaseProfile");
    },
    Init() {
      HttpManager.GetLabels(1, 100).then((e) => {
        console.log(e.data.data);
        this.table = e.data.data;
      });
    },
    InitEnterprises() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      HttpManager.GetEnterprises(this.currentPage, this.pagecount).then((e) => {
        // setTimeout(() => {
        loading.close();
        // }, 2000);
        console.log(e.data.data);
        this.TableEnterprises = e.data.data;
      });
    },
    currentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.InitEnterprises();
    },
    changeEnter(id, postsNum, title) {
      if (postsNum == 0) {
        this.$message({
          message: "暂无帖子",
          type: "warning",
        });
      } else {
        this.$router.push({
          path: "/SpecialMeridian",
          query: {
            enterpriseId: id,
            title: title,
			postid:2
          },
        });
      }
    },
    ChangeLable(id, postsNum, title) {
      if (postsNum == 0) {
        this.$message({
          message: "暂无帖子",
          type: "warning",
        });
      } else {
        this.$router.push({
          path: "/SpecialMeridian",
          query: {
            id: id,
            title: title,
			postid:1
          },
        });
      }
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.main_heade {
  height: 100px;
  line-height: 100px;
  width: 100%;
  color: white;
  text-align: center;
  background-color: #03d3bd;
}

.main_content {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: 0.1875rem;
  margin-top: 1.25rem;
  background-color: white;
  overflow: hidden;
}

.kuang {
  /* margin-top: 1.25rem; */
  width: 80%;
  height: 40px;
  padding-left: 20px;
  border-radius: 1.5625rem;
  border: none;
  outline-style: none;
  /* margin-left:40px; */
  background-color: #f4f4f4;
  position: relative;
}

.icon {
  margin-left: 40px;
  margin-top: 1.25rem;
  height: 50px;
  line-height: 3.125rem;
  font-size: 2.25rem;
  color: #e3e3e3;
}

.meridian {
  margin-top: 1.25rem;
  cursor: pointer;
}

.meridian_item {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 0.3125rem;
  border: 1px #f0f0f0 solid;
  // background-color: #f0f0f0;
  margin: 0.625rem;
  display: flex;
  // justify-content: center;
  align-items: center;
}

// 搜索框
.dataSearch {
  position: relative;
  width: 80%;
  height: 36px;

  // 输入框
  .ipt_val {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 14px 0 28px;
    outline: none;
    border-color: #d5d7d9;
    width: 90%;
    height: 34px;
    font-size: 14px;
    color: #181e33;
    border: 1px solid #e5e5e5;
    background: #f5f6f7;
    // border-radius: 40px;

    &:hover {
      border-color: #03d3bd;
    }

    &:focus {
      border-color: #03d3bd;
    }
  }

  // 放大镜

  // 搜索按钮
  .ipt_search {
    border: 1px solid #000;
    // width: 40px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 22px;
    border: none;
    // width: 90px;
    height: 36px;
    border-radius: 17px;
    background-color: #03d3bd;
    color: #fff;

    &:hover {
      cursor: pointer;
      color: #fff;
    }
  }
}

.ipt_search {
  // width: 40px;
  // position: absolute;
  // right: 0;
  // top: 0;
  margin-left: 1.25rem;
  padding: 0 12px;
  border: none;
  height: 36px;
  border-radius: 5px;
  background-color: #03d3bd;
  color: #fff;

  &:hover {
    cursor: pointer;
    color: #fff;
  }
}
.ipt_searchOne {
  background-color: #03d3bd;
  color: #fff;
  margin-left: -20px;
  padding: 0 12px;
  width: 95px;
  border: none;
  height: 36px;
  border-radius: 5px;
}
.el-icon-search {
  //   border: 1px solid #000;
  position: relative;
  left: -1px;
  top: 0.5px;
}
.fenyePage {
  display: flex;
  justify-content: center;
  padding: 10px;
}
// .fenye {
//   border: 1px solid #000;
//   margin: 0 auto;
// }
</style>
